<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
	<meta charset="utf-8"/>
	<title>Points Wizard</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
	<meta content="" name="description"/>
	<meta content="" name="author"/>
	<meta name="MobileOptimized" content="320">
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN THEME STYLES -->
	<link href="css/style-metronic.css" rel="stylesheet" type="text/css"/>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
	<link href="css/style-responsive.css" rel="stylesheet" type="text/css"/>
	<link href="css/plugins.css" rel="stylesheet" type="text/css"/>
	<link href="css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
	<link href="css/custom.css" rel="stylesheet" type="text/css"/>
	<!-- END THEME STYLES -->
	<link rel="shortcut icon" href="favicon.ico"/>
	<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no;">

	<script>
		document.addEventListener("DOMContentLoaded", function () {
		    var height = window.innerHeight;
		    var tileHeight = (height - 100)/4;
		    var tiles = document.getElementsByClassName('tile');
		    for (var i = 0; i < tiles.length; i++) {
		    	tiles[i].style.height = tileHeight + 'px';
		    };
		   	var faMarginTop = (tileHeight - 30 - 46) / 3;
		    var fas = document.getElementsByClassName('fa');
		    for (var i = 0; i < fas.length; i++) {
		    	fas[i].style.marginTop = faMarginTop + 'px';
		    };
		});
	</script>
</head>
<body>
	<!-- BEGIN CONTAINER -->
	<div class="page-container">
		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">

			<!-- BEGIN PAGE CONTENT-->
			<div class="tiles">
				<div class="col-md-12">
					<div class="col-md-6">
						<a class="tile bg-blue" href="contact.html">
							<div class="tile-body"> <i class="fa fa-signal"></i>
							</div>
							<div class="tile-object">
								<div class="name">Proteins</div>
							</div>
						</a>
					</div>
					<div class="col-md-6">
						<a class="tile bg-green">
							<div class="tile-body"> <i class="fa fa-square"></i>
							</div>
							<div class="tile-object">
								<div class="name">Carbs</div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-12">
					<div class="col-md-6">
						<a class="tile bg-red">
							<div class="tile-body">
								<i class="fa fa-sun-o"></i>
							</div>
							<div class="tile-object">
								<div class="name">Fat</div>
							</div>
						</a>
					</div>
					<div class="col-md-6">
						<a class="tile bg-purple">
							<div class="tile-body">
								<i class="fa fa-circle-o"></i>
							</div>
							<div class="tile-object">
								<div class="name">Fibres</div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-12">
					<div class="col-md-6">
						<a class="tile bg-yellow">
							<div class="tile-body">
								<i class="fa fa-compass"></i>
							</div>
							<div class="tile-object">
								<div class="name">Grams</div>
							</div>
						</a>
					</div>
					<div class="col-md-6">
						<a class="tile bg-dark">
							<div class="tile-body">
								<i class="fa fa-magic"></i>
							</div>
							<div class="tile-object">
								<div class="name">Points</div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-12">
					<div class="col-md-4" style="padding-left: 0px;">
						<a href="#" class="btn default btn-block">Store</a>
					</div>
					<div class="col-md-4">
						<a href="#" class="btn default btn-block">Recall</a>
					</div>
					<div class="col-md-4" style="float: right;">
						<a href="#" class="btn default btn-block">Help</a>
					</div>
				</div>
				<div class="col-md-12">
					<div class="col-md-6">
						<a href="#" class="btn yellow btn-block">About</a>
					</div>
					<div class="col-md-6">
						<h4 style="color: white; text-align: right;">&copy; 2014 Moon Media</h4>
					</div>
				</div>
			</div>
			<!-- END PAGE CONTENT-->
		</div>
		<!-- END CONTENT -->
	</div>
	<!-- END CONTAINER -->
</body>
</html>